import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:get/get.dart';
import 'package:gourmet/color/hex.dart';
import 'package:gourmet/extensions/ex_widget.dart';
import 'package:gourmet/ui/coupon_shape_border.dart';
import 'package:gourmet/utils/colors.dart';
import 'package:gourmet/utils/radian.dart';
import 'package:gourmet/utils/styles.dart';

class CouponsCenterController extends GetxController {
  final double navHeight = 44 + Get.mediaQuery.padding.top;
  final double navTop = 44.0;
}

class CouponsCenterPage extends GetView<CouponsCenterController> {
  const CouponsCenterPage({super.key});

  @override
  Widget build(BuildContext context) {
    return MediaQuery.removeViewPadding(
      removeTop: true,
      removeBottom: true,
      removeLeft: true,
      removeRight: true,
      context: context,
      child: Scaffold(
        backgroundColor: HexColor(ColorsUtils.colorF7f7),
        appBar: PreferredSize(
          preferredSize: Size.fromHeight(controller.navHeight),
          child: AnnotatedRegion<SystemUiOverlayStyle>(
            value: SystemUiOverlayStyle.dark,
            child: Container(
              color: HexColor(ColorsUtils.colorF7f7),
              height: controller.navHeight,
              padding: Get.mediaQuery.padding,
              child: Stack(
                children: [
                  Positioned(
                    width: 40,
                    height: controller.navTop,
                    top: 0,
                    left: 0,
                    child: Center(
                      child: Icon(
                        CupertinoIcons.chevron_back,
                        size: 20,
                        color: HexColor(ColorsUtils.color0000),
                      ),
                    ).onTap(Get.back),
                  ),
                  Center(
                    child: Text(
                      '领券中心',
                      softWrap: true,
                      style: StylesUtils.customTextStyle(
                        fontSize: StylesUtils.fontSize16,
                        fontWeight: FontWeight.w700,
                        color: ColorsUtils.color0000,
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
        body: SingleChildScrollView(
          child: Column(
            children: [
              Container(
                alignment: Alignment.center,
                margin: const EdgeInsets.only(top: 10),
                child: Material(
                  color: Colors.white,
                  shape: const CouponShapeBorder(lineRate: 0.75),
                  child: Container(
                    constraints:
                        const BoxConstraints.expand(width: 345, height: 90),
                    child: Row(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Expanded(
                          child: Stack(
                            children: [
                              Row(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  SizedBox(
                                    width: 100,
                                    child: Column(
                                      children: [
                                        Container(
                                          margin: const EdgeInsets.only(
                                              top: 20, bottom: 5),
                                          alignment: Alignment.center,
                                          child: Text.rich(
                                            TextSpan(
                                              children: [
                                                TextSpan(
                                                  text: '10',
                                                  style: StylesUtils
                                                      .customTextStyle(
                                                    fontSize:
                                                        StylesUtils.fontSize30,
                                                    color:
                                                        ColorsUtils.colorFf64,
                                                    fontWeight: FontWeight.w700,
                                                  ),
                                                ),
                                                TextSpan(
                                                  text: '元',
                                                  style: StylesUtils
                                                      .customTextStyle(
                                                    fontSize:
                                                        StylesUtils.fontSize12,
                                                    color:
                                                        ColorsUtils.colorFf64,
                                                  ),
                                                ),
                                              ],
                                            ),
                                          ),
                                        ),
                                        Center(
                                          child: Text(
                                            '满100元可用',
                                            style: StylesUtils.customTextStyle(
                                              fontSize: StylesUtils.fontSize12,
                                              color: ColorsUtils.color7979,
                                            ),
                                          ),
                                        ),
                                      ],
                                    ),
                                  ),
                                  Expanded(
                                    child: Padding(
                                      padding: const EdgeInsets.only(left: 15),
                                      child: Column(
                                        children: [
                                          Container(
                                            margin: const EdgeInsets.only(
                                                top: 25, bottom: 15),
                                            alignment: Alignment.centerLeft,
                                            child: Text(
                                              '满减红包',
                                              style:
                                                  StylesUtils.customTextStyle(
                                                fontWeight: FontWeight.w700,
                                                color: ColorsUtils.color0000,
                                                fontSize:
                                                    StylesUtils.fontSize16,
                                              ),
                                            ),
                                          ),
                                          Align(
                                            alignment: Alignment.centerLeft,
                                            child: Text(
                                              '有效期至2025.10.29',
                                              style:
                                                  StylesUtils.customTextStyle(
                                                color: ColorsUtils.color7979,
                                                fontSize:
                                                    StylesUtils.fontSize12,
                                              ),
                                            ),
                                          )
                                        ],
                                      ),
                                    ),
                                  ),
                                ],
                              ),
                              Positioned(
                                top: 0,
                                left: 0,
                                height: 20,
                                width: 50,
                                child: Container(
                                  decoration: BoxDecoration(
                                    borderRadius: const BorderRadius.only(
                                      topLeft: Radius.circular(10),
                                      bottomRight: Radius.circular(10),
                                    ),
                                    color: HexColor(ColorsUtils.colorFf99),
                                  ),
                                  alignment: Alignment.center,
                                  child: Text(
                                    '满减券',
                                    style: StylesUtils.customTextStyle(
                                        fontSize: StylesUtils.fontSize12),
                                  ),
                                ),
                              ),
                            ],
                          ),
                        ),
                        Container(
                          width: 345 * 0.25,
                          height: 90,
                          alignment: Alignment.center,
                          child: Container(
                            constraints: const BoxConstraints.expand(
                                width: 70, height: 30),
                            alignment: Alignment.center,
                            decoration: BoxDecoration(
                              gradient: LinearGradient(
                                colors: [
                                  ColorsUtils.rgba(255, 153, 0, 1),
                                  ColorsUtils.rgba(255, 153, 0, 1),
                                  ColorsUtils.rgba(254, 70, 1, 1),
                                  ColorsUtils.rgba(254, 70, 1, 1)
                                ],
                                stops: const [0, 0, 1, 1],
                                begin: Alignment.centerLeft,
                                end: Alignment.centerRight,
                                transform: GradientRotation(
                                  RadianUtils.angleToRadian(90),
                                ),
                              ),
                              borderRadius: BorderRadius.circular(5),
                            ),
                            child: Text(
                              '立即领取',
                              style: StylesUtils.customTextStyle(
                                fontSize: StylesUtils.fontSize12,
                              ),
                            ),
                          ),
                        )
                      ],
                    ),
                  ),
                ),
              ),
              Container(
                alignment: Alignment.center,
                margin: const EdgeInsets.only(top: 10),
                child: Material(
                  color: Colors.white,
                  shape: const CouponShapeBorder(lineRate: 0.75),
                  child: Container(
                    constraints:
                        const BoxConstraints.expand(width: 345, height: 90),
                    child: Row(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Expanded(
                          child: Stack(
                            children: [
                              Row(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  SizedBox(
                                    width: 100,
                                    child: Column(
                                      children: [
                                        Container(
                                          margin: const EdgeInsets.only(
                                              top: 20, bottom: 5),
                                          alignment: Alignment.center,
                                          child: Text.rich(
                                            TextSpan(
                                              children: [
                                                TextSpan(
                                                  text: '4',
                                                  style: StylesUtils
                                                      .customTextStyle(
                                                    fontSize:
                                                        StylesUtils.fontSize30,
                                                    color:
                                                        ColorsUtils.colorFf64,
                                                    fontWeight: FontWeight.w700,
                                                  ),
                                                ),
                                                TextSpan(
                                                  text: '元',
                                                  style: StylesUtils
                                                      .customTextStyle(
                                                    fontSize:
                                                        StylesUtils.fontSize12,
                                                    color:
                                                        ColorsUtils.colorFf64,
                                                  ),
                                                ),
                                              ],
                                            ),
                                          ),
                                        ),
                                        Center(
                                          child: Text(
                                            '无限期',
                                            style: StylesUtils.customTextStyle(
                                              fontSize: StylesUtils.fontSize12,
                                              color: ColorsUtils.color7979,
                                            ),
                                          ),
                                        ),
                                      ],
                                    ),
                                  ),
                                  Expanded(
                                    child: Padding(
                                      padding: const EdgeInsets.only(left: 15),
                                      child: Column(
                                        children: [
                                          Container(
                                            margin: const EdgeInsets.only(
                                                top: 25, bottom: 15),
                                            alignment: Alignment.centerLeft,
                                            child: Text(
                                              '配送费红包',
                                              style:
                                                  StylesUtils.customTextStyle(
                                                fontWeight: FontWeight.w700,
                                                color: ColorsUtils.color0000,
                                                fontSize:
                                                    StylesUtils.fontSize16,
                                              ),
                                            ),
                                          ),
                                          Align(
                                            alignment: Alignment.centerLeft,
                                            child: Text(
                                              '有效期至2025.10.29',
                                              style:
                                                  StylesUtils.customTextStyle(
                                                color: ColorsUtils.color7979,
                                                fontSize:
                                                    StylesUtils.fontSize12,
                                              ),
                                            ),
                                          )
                                        ],
                                      ),
                                    ),
                                  ),
                                ],
                              ),
                              Positioned(
                                top: 0,
                                left: 0,
                                height: 20,
                                width: 50,
                                child: Container(
                                  decoration: BoxDecoration(
                                    borderRadius: const BorderRadius.only(
                                      topLeft: Radius.circular(10),
                                      bottomRight: Radius.circular(10),
                                    ),
                                    color: HexColor(ColorsUtils.colorFf99),
                                  ),
                                  alignment: Alignment.center,
                                  child: Text(
                                    '新人券',
                                    style: StylesUtils.customTextStyle(
                                        fontSize: StylesUtils.fontSize12),
                                  ),
                                ),
                              ),
                            ],
                          ),
                        ),
                        Container(
                          width: 345 * 0.25,
                          height: 90,
                          alignment: Alignment.center,
                          child: Container(
                            constraints: const BoxConstraints.expand(
                                width: 70, height: 30),
                            alignment: Alignment.center,
                            decoration: BoxDecoration(
                              gradient: LinearGradient(
                                colors: [
                                  ColorsUtils.rgba(255, 153, 0, 1),
                                  ColorsUtils.rgba(255, 153, 0, 1),
                                  ColorsUtils.rgba(254, 70, 1, 1),
                                  ColorsUtils.rgba(254, 70, 1, 1)
                                ],
                                stops: const [0, 0, 1, 1],
                                begin: Alignment.centerLeft,
                                end: Alignment.centerRight,
                                transform: GradientRotation(
                                  RadianUtils.angleToRadian(90),
                                ),
                              ),
                              borderRadius: BorderRadius.circular(5),
                            ),
                            child: Text(
                              '立即领取',
                              style: StylesUtils.customTextStyle(
                                fontSize: StylesUtils.fontSize12,
                              ),
                            ),
                          ),
                        )
                      ],
                    ),
                  ),
                ),
              ),
              Container(
                alignment: Alignment.center,
                margin: const EdgeInsets.only(top: 10),
                child: Material(
                  color: Colors.white,
                  shape: const CouponShapeBorder(lineRate: 0.75),
                  child: Container(
                    constraints:
                        const BoxConstraints.expand(width: 345, height: 90),
                    child: Row(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Expanded(
                          child: Stack(
                            children: [
                              Row(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  SizedBox(
                                    width: 100,
                                    child: Column(
                                      children: [
                                        Container(
                                          margin: const EdgeInsets.only(
                                              top: 20, bottom: 5),
                                          alignment: Alignment.center,
                                          child: Text.rich(
                                            TextSpan(
                                              children: [
                                                TextSpan(
                                                  text: '10',
                                                  style: StylesUtils
                                                      .customTextStyle(
                                                    fontSize:
                                                        StylesUtils.fontSize30,
                                                    color:
                                                        ColorsUtils.colorFf64,
                                                    fontWeight: FontWeight.w700,
                                                  ),
                                                ),
                                                TextSpan(
                                                  text: '元',
                                                  style: StylesUtils
                                                      .customTextStyle(
                                                    fontSize:
                                                        StylesUtils.fontSize12,
                                                    color:
                                                        ColorsUtils.colorFf64,
                                                  ),
                                                ),
                                              ],
                                            ),
                                          ),
                                        ),
                                        Center(
                                          child: Text(
                                            '无限期',
                                            style: StylesUtils.customTextStyle(
                                              fontSize: StylesUtils.fontSize12,
                                              color: ColorsUtils.color7979,
                                            ),
                                          ),
                                        ),
                                      ],
                                    ),
                                  ),
                                  Expanded(
                                    child: Padding(
                                      padding: const EdgeInsets.only(left: 15),
                                      child: Column(
                                        children: [
                                          Container(
                                            margin: const EdgeInsets.only(
                                                top: 25, bottom: 15),
                                            alignment: Alignment.centerLeft,
                                            child: Text(
                                              '通用红包',
                                              style:
                                                  StylesUtils.customTextStyle(
                                                fontWeight: FontWeight.w700,
                                                color: ColorsUtils.color0000,
                                                fontSize:
                                                    StylesUtils.fontSize16,
                                              ),
                                            ),
                                          ),
                                          Align(
                                            alignment: Alignment.centerLeft,
                                            child: Text(
                                              '有效期至2025.10.29',
                                              style:
                                                  StylesUtils.customTextStyle(
                                                color: ColorsUtils.color7979,
                                                fontSize:
                                                    StylesUtils.fontSize12,
                                              ),
                                            ),
                                          )
                                        ],
                                      ),
                                    ),
                                  ),
                                ],
                              ),
                              Positioned(
                                top: 0,
                                left: 0,
                                height: 20,
                                width: 50,
                                child: Container(
                                  decoration: BoxDecoration(
                                    borderRadius: const BorderRadius.only(
                                      topLeft: Radius.circular(10),
                                      bottomRight: Radius.circular(10),
                                    ),
                                    color: HexColor(ColorsUtils.colorFf99),
                                  ),
                                  alignment: Alignment.center,
                                  child: Text(
                                    '神券',
                                    style: StylesUtils.customTextStyle(
                                        fontSize: StylesUtils.fontSize12),
                                  ),
                                ),
                              ),
                            ],
                          ),
                        ),
                        Container(
                          width: 345 * 0.25,
                          height: 90,
                          alignment: Alignment.center,
                          child: Container(
                            constraints: const BoxConstraints.expand(
                                width: 70, height: 30),
                            alignment: Alignment.center,
                            decoration: BoxDecoration(
                              gradient: LinearGradient(
                                colors: [
                                  ColorsUtils.rgba(255, 153, 0, 1),
                                  ColorsUtils.rgba(255, 153, 0, 1),
                                  ColorsUtils.rgba(254, 70, 1, 1),
                                  ColorsUtils.rgba(254, 70, 1, 1)
                                ],
                                stops: const [0, 0, 1, 1],
                                begin: Alignment.centerLeft,
                                end: Alignment.centerRight,
                                transform: GradientRotation(
                                  RadianUtils.angleToRadian(90),
                                ),
                              ),
                              borderRadius: BorderRadius.circular(5),
                            ),
                            child: Text(
                              '立即领取',
                              style: StylesUtils.customTextStyle(
                                fontSize: StylesUtils.fontSize12,
                              ),
                            ),
                          ),
                        )
                      ],
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
